<template>
	<view class="page-content">
		<view class="nav-tabbar flex flex-middle">
			<view class="flex-item" v-for="(item,index) in tabbar" :key="index" :class="index == tabIndex ? 'active' : ''" @click="tabChange(index)">{{ item }}</view>
		</view>
		<swiper class="swiper-box" style="flex: 1;height: calc(100vh - 180upx);" :current="tabIndex" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item flex">
				<scroll-view scroll-view class="scroll-v list" enableBackToTop="true" scroll-y>
				<view class="wrap canvas-wrap">
					<view class="top-tips flex flex-row flex-middle flex-center">
						<text>呼和浩特和林新区</text>
						<text>最近更新 03:40 下午</text>
					</view>
					<view class="canvas-box">
						<circle-progress-bar :progress="40"></circle-progress-bar>
					</view>
				</view>
				<view class="wrap pollution-wrap">
					<u-title title="污染物" align="center" titleType="list-title" onlyTitle class="wrap-title"></u-title>
					<view class="content flex flex-wrap">
						<view class="pollution-item flex flex-row color1">
							<image src="../../static/monitor/tips.png" mode="widthFix" @click="goto('PM25')"></image>
							<view class="flex-item">
								<view class="title">
									<text>PM2.5</text>
									<text class="unit">μg/m³</text>
								</view>
								<view class="value">11</view>
							</view>
						</view>
						<view class="pollution-item flex flex-row color2">
							<image src="../../static/monitor/tips.png" mode="widthFix" @click="goto('PM10')"></image>
							<view class="flex-item">
								<view class="title">
									<text>PM10</text>
									<text class="unit">μg/m³</text>
								</view>
								<view class="value">43.5</view>
							</view>
						</view>
						<view class="pollution-item flex flex-row color3">
							<image src="../../static/monitor/tips.png" mode="widthFix" @click="goto('O3')"></image>
							<view class="flex-item">
								<view class="title">
									<text>O3</text>
									<text class="unit">μg/m³</text>
								</view>
								<view class="value">103.5</view>
							</view>
						</view>
						<view class="pollution-item flex flex-row color4">
							<image src="../../static/monitor/tips.png" mode="widthFix" @click="goto('NO2')"></image>
							<view class="flex-item">
								<view class="title">
									<text>NO2</text>
									<text class="unit">μg/m³</text>
								</view>
								<view class="value">8</view>
							</view>
						</view>
						<view class="pollution-item flex flex-row color5">
							<image src="../../static/monitor/tips.png" mode="widthFix" @click="goto('SO2')"></image>
							<view class="flex-item">
								<view class="title">
									<text>SO2</text>
									<text class="unit">μg/m³</text>
								</view>
								<view class="value">6</view>
							</view>
						</view>
						<view class="pollution-item flex flex-row color6">
							<image src="../../static/monitor/tips.png" mode="widthFix" @click="goto('CO')"></image>
							<view class="flex-item">
								<view class="title">
									<text>CO</text>
									<text class="unit">μg/m³</text>
								</view>
								<view class="value">6</view>
							</view>
						</view>
					</view>
				</view>
				<view class="wrap charts-wrap">
					<u-title title="历史数据" align="center" titleType="list-title" onlyTitle class="wrap-title b-b"></u-title>
					<view class="content">
						<scroll-bar :tab="canvasType" @change="canvasBarChange"></scroll-bar>
						<view class="show-charts-tip">
							<view class="date">
								<text>{{ canvasItem.categories }}</text>
								<!-- <text>4月28日</text><text>4:00-5:00</text><text>下午</text>    -->
							</view>
							<view class="content flex flex-row">
								<view class="flex-item address">
									{{canvasType[canvasIndex]}} <text>和林新区</text>
								</view>
								<view class="flex-item value">
									<text>优</text>{{ canvasItem.value }}
								</view>
							</view>
						</view>
						<view class="charts-box">
							<canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts" @touchstart="touchColumn($event,'canvasColumnA')"></canvas>
						</view>
					</view>
				</view>
				<!-- <view class="progress-box flex flex-wrap">
					<view class="progress-item" v-for="(item,index) in monitor" v-if="index!=0">
						<view class="title">{{ item.name }}</view>
						<view class="sub-title">
							<text class="num">{{ item.value }}</text>
							<text class="unit">{{ item.units }}</text>
						</view>
						<progress :percent="item.value" border-radius="5" stroke-width="5" :activeColor="colors[index].activeColor" :backgroundColor="colors[index].backgroundColor" active/>
					</view>
				</view> -->
				<view class="wrap" style="padding: 20upx 0;">
					<view class="card-item flex flex-row flex-middle">
						<view class="flex-item ">
							<view class="title">
								<image src="../../static/monitor/kqzl.png" mode="widthFix"></image>
								域内空气质量达标率
							</view>
							<view class="tips">监测数据来自2020年环保局监测站 </view>
						</view>
						<view class="num flex" style="color: #A8E160;">
							<count-to :start="0" :end="70"/>%
						</view>
					</view>
					<view class="card-item flex flex-row flex-middle">
						<view class="flex-item ">
							<view class="title">
								<image src="../../static/monitor/tqdbl.png" mode="widthFix"></image>
								良好天气达标率
							</view>
							<view class="tips">监测数据来自2020年环保局监测站 </view>
						</view>
						<view class="num flex" style="color: #FDD64D">
							<count-to :start="0" :end="90"/>%
						</view>
					</view>
					<view class="card-item flex flex-row flex-middle">
						<view class="flex-item ">
							<view class="title">
								<image src="../../static/monitor/zyjc.png" mode="widthFix"></image>
								噪音监测
							</view>
							<view class="tips">监测数据来自2020年环保局监测站  </view>
						</view>
						<view class="num flex" style="color: #FF9B57">
							<count-to :start="0" :end="100"/>分贝
						</view>
					</view>
				</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item flex">
				<scroll-view scroll-view class="scroll-v list" enableBackToTop="true" scroll-y>
					<view class="wrap charts-wrap">
						<u-title title="土壤监测数据" class="wrap-title b-b">
							<picker class="flex-wrap" v-if="websiteList.length>0" :range="websiteList" :value="websiteIndex" @change="websiteChange">
								<view class="flex flex-middle">
									<view class="flex-item uni-input">{{ websiteList[websiteIndex] }}</view>
									<view class="iconfont icon-xiajiantou"></view>
								</view>
							</picker>
						</u-title>
						<view class="content">
							<scroll-bar :tab="soilType" @change="canvasBarSoilChange"></scroll-bar>
							<view class="show-charts-tip">
								<view class="date">
									<text>{{ soilItem.categories }}</text>
									<!-- <text>4月28日</text><text>4:00-5:00</text><text>下午</text>   --> 
								</view>
								<view class="content flex flex-row">
									<view class="flex-item address">
										{{ soilType[soilIndex] }} <text>{{websiteList[websiteIndex]}}</text>
									</view>
									<view class="flex-item value">
										<text>优</text>{{ soilItem.value }}
									</view>
								</view>
							</view>
							<view class="charts-box">
								<canvas canvas-id="canvasColumnB" id="canvasColumnB" class="charts" @touchstart="touchColumn($event,'canvasColumnB')"></canvas>
							</view>
						</view>
					</view>
					
					<view class="wrap charts-wrap">
						<u-title title="水质监测数据" class="b-b">
							<picker class="flex-wrap" v-if="websiteList.length>0" :range="websiteList" :value="websiteIndex" @change="websiteChange">
								<view class="flex flex-middle">
									<view class="flex-item uni-input">{{ websiteList[websiteIndex] }}</view>
									<view class="iconfont icon-xiajiantou"></view>
								</view>
							</picker>
						</u-title>
						<view class="content">
							<scroll-bar :tab="waterType" @change="canvasBarWaterChange"></scroll-bar>
							<view class="show-charts-tip">
								<view class="date">
									<text>{{ waterItem.categories }}</text>    
								</view>
								<view class="content flex flex-row">
									<view class="flex-item address">
										{{waterType[waterIndex]}} <text>{{websiteList[websiteIndex]}}</text>
									</view>
									<view class="flex-item value">
										<text>优</text>{{ waterItem.value }}
									</view>
								</view>
							</view>
							<view class="charts-box">
								<canvas canvas-id="canvasColumnC" id="canvasColumnC" class="charts" @touchstart="touchColumn($event,'canvasColumnC')"></canvas>
							</view>
						</view>
					</view>
					
					<view class="wrap charts-wrap">
						<u-title title="植被监测数据" class="b-b">
							<picker class="flex-wrap" v-if="websiteList.length>0" :range="websiteList" :value="websiteIndex" @change="websiteChange">
								<view class="flex flex-middle">
									<view class="flex-item uni-input">{{ websiteList[websiteIndex] }}</view>
									<view class="iconfont icon-xiajiantou"></view>
								</view>
							</picker>
						</u-title>
						<view class="content">
							<scroll-bar :tab="vegetationType" @change="canvasBarVegetationChange"></scroll-bar>
							<view class="show-charts-tip">
								<view class="date">
									<text>{{ vegetationItem.categories }}</text>    
								</view>
								<view class="content flex flex-row">
									<view class="flex-item address">
										{{vegetationType[vegetationIndex]}} <text>{{websiteList[websiteIndex]}}</text>
									</view>
									<view class="flex-item value">
										<text>优</text>{{ vegetationItem.value }}
									</view>
								</view>
							</view>
							<view class="charts-box">
								<canvas canvas-id="canvasColumnD" id="canvasColumnD" class="charts" @touchstart="touchColumn($event,'canvasColumnD')"></canvas>
							</view>
						</view>
					</view>
					
					<!-- <view class="wrap charts-wrap">
						<u-title title="动物监测数据" class="b-b">
							<picker class="flex-wrap" v-if="websiteList.length>0" :range="websiteList" :value="websiteIndex" @change="websiteChange">
								<view class="flex flex-middle">
									<view class="flex-item uni-input">{{ websiteList[websiteIndex] }}</view>
									<view class="iconfont icon-xiajiantou"></view>
								</view>
							</picker>
						</u-title>
						<view class="content">
							<scroll-bar :tab="animalType" @change="canvasBarAnimalChange"></scroll-bar>
							<view class="show-charts-tip">
								<view class="date">
									<text>{{ animalItem.categories }}</text>    
								</view>
								<view class="content flex flex-row">
									<view class="flex-item address">
										{{animalType[animalIndex]}} <text>{{websiteList[websiteIndex]}}</text>
									</view>
									<view class="flex-item value">
										<text>优</text>{{ animalItem.value }}
									</view>
								</view>
							</view>
							<view class="charts-box">
								<canvas canvas-id="canvasColumnE" id="canvasColumnE" class="charts" @touchstart="touchColumn($event,'canvasColumnE')"></canvas>
							</view>
						</view>
					</view> -->
					
					<view class="wrap charts-wrap">
						<u-title title="微生物监测数据" class="b-b">
							<picker class="flex-wrap" v-if="websiteList.length>0" :range="websiteList" :value="websiteIndex" @change="websiteChange">
								<view class="flex flex-middle">
									<view class="flex-item uni-input">{{ websiteList[websiteIndex] }}</view>
									<view class="iconfont icon-xiajiantou"></view>
								</view>
							</picker>
						</u-title>
						<view class="content">
							<scroll-bar :tab="microbeType" @change="canvasBarMicrobeChange"></scroll-bar>
							<view class="show-charts-tip">
								<view class="date">
									<text>{{ microbeItem.categories }}</text>    
								</view>
								<view class="content flex flex-row">
									<view class="flex-item address">
										{{microbeType[microbeIndex]}} <text>{{websiteList[websiteIndex]}}</text>
									</view>
									<view class="flex-item value">
										<text>优</text>{{ microbeItem.value }}
									</view>
								</view>
							</view>
							<view class="charts-box">
								<canvas canvas-id="canvasColumnF" id="canvasColumnF" class="charts" @touchstart="touchColumn($event,'canvasColumnF')"></canvas>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import uTitle from '@/components/title/titles.vue'
	import scrollBar from '@/components/scroll-bar/scroll-bar.vue'
	import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue'
	import uCharts from '@/components/u-charts/u-charts.js';
	import countTo from '../../components/count-to/count-to.vue'
	var _self,canvasObj={};
	export default {
		components:{
			uTitle,
			scrollBar,
			circleProgressBar,
			countTo
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				tabbar:['环境指数','生态指数'],
				tabIndex:0,
				
				categories:[
					"14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00",
					"20:00-21:00","21:00-22:00","22:00-23:00","23:00-0:00","0:00-1:00","1:00-2:00","2:00-3:00","3:00-4:00",
					"4:00-5:00","5:00-6:00","6:00-7:00","7:00-8:00","8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00",
					"12:00-13:00","13:00-14:00",
				],
				canvasType:['AQI','PM2.5','PM10','O3','NO2','SO2'],
				canvasIndex:0,
				canvasItem:'',
				// 土壤监测数据
				soilType:['氮','磷','钾','PH值','电导率','温湿度'],
				soilIndex:0,
				soilItem:'',
				// 水质监测数据
				waterType:['PH值','浊度','电导率','溶解氧','水质氨氮'],
				waterIndex:0,
				waterItem:'',
				// 植被监测数据
				vegetationType:['植被类型','植物种类','优势种','伴生种','植被覆盖度'],
				vegetationIndex:0,
				vegetationItem:'',
				// 动物监测数据
				animalType:['动物种类','动物数量'],
				animalIndex:0,
				animalItem:'',
				// 微生物监测数据
				microbeType:['水体总大肠菌群','水体耐热大肠菌群','水体菌落总数'],
				microbeIndex:0,
				microbeItem:'',
				
				monitor:[],
				isRefresh:false,
				
				websiteList:['站点一','站点二'],
				websiteIndex:0,
				
				defaultCategories:[
					'14:00','','','','','',
					'20:00','','','','','',
					'2:00','','','','','',
					'8:00','','','','',
					'13:00'
				],
				
			}
		},
		onReady() {
			_self = this
			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(264);
			
			this.getHistoryData()
			this.getSoilData()
			this.getWaterData()
			this.getVegetationData()
			// this.getAnimalData()
			this.getMicrobeData()
		},
		onLoad() {
			
		},
		onPullDownRefresh() {		
			this.isRefresh = true
			this.getInfo()
		},
		methods: {
			tabChange(index){
				this.switchTab(index);
			},
			ontabchange(e){
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			// tab切换后触发
			switchTab(index) {
				if(index == this.tabIndex) return
				this.tabIndex = index				
			},
			goto(page){
				uni.navigateTo({
					url:'../tips/'+page
				})
			},
			// 历史数据
			canvasBarChange(index){
				console.log(index)
				this.canvasIndex = index
			},
			// 土壤监测数据
			canvasBarSoilChange(index){
				console.log(index)
				this.soilIndex = index
			},
			// 水质监测数据
			canvasBarWaterChange(index){
				console.log(index)
				this.waterIndex = index
			},
			// 植被监测数据
			canvasBarVegetationChange(index){
				console.log(index)
				this.vegetationIndex = index
			},
			// 动物监测数据
			canvasBarAnimalChange(index){
				console.log(index)
				this.animalIndex = index
			},
			// 微生物监测数据
			canvasBarMicrobeChange(index){
				console.log(index)
				this.microbeIndex = index
			},
			getInfo(){
				this.$$.request({
					url:this.config.getMonitor,
					method:"GET",
					data:{}
				},true,true).then((res)=>{
					console.log(res)
					if(res.code == 2000) {
						this.monitor = res.data
						let _value = parseInt(res.data[0].value)
						this.getStep(_value)
					}					
				}).catch(()=>{					
					console.log("请求失败")
				}).finally(()=>{	
					if(this.isRefresh){
						uni.stopPullDownRefresh();
						this.isRefresh = !this.isRefresh
					}
					
					console.log("complate")
				})
			},
			
			// 柱状图基本配置
			setColumnOption(canvasId, chartData){
				let opt = {
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					padding:[10,10,10,0],
					legend:{
						show:false,
					},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						"disabled":false,
						"disableGrid":true,
						"axisLine":true,
					},
					yAxis: {
						disabled:false,
						disableGrid:false,
					},
					dataLabel: false,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						"column": {
							"type": "group",
							"width": 20,
							"seriesGap": 1,
							"categoryGap": 1,
						},
						"tooltip":{
							"showBox": false,
						}
					},
				}
				return opt
			},
			showColumn(canvasId,chartData){
				
				let opt = this.setColumnOption(canvasId,chartData)
				if(chartData.colors) opt.colors = chartData.colors
				canvasObj[canvasId] = new uCharts(opt);	
			},
			// 柱状图点击事件
			touchColumn(e,canvasId){
				let dataIndex= canvasObj[canvasId].getCurrentDataIndex(e) 
				let str = ''
				let data
				canvasObj[canvasId].showToolTip(e, {
					format: function (item, category) {
						data = {
							categories:_self.categories[dataIndex]
						}
						if(typeof item.data === 'object'){
							data.value = item.data.value
							str = _self.categories[dataIndex] + ' ' + item.name + ':' + item.data.value 
						}else{
							data.value = item.data
							str =  _self.categories[dataIndex] + ' ' + item.name + ':' + item.data 
						}
						
						_self.changeData(canvasId,data)
						return str
					}
				});
			},
			changeData(canvasId,data){
				switch (canvasId){
					case "canvasColumnA":
						this.canvasItem = data
						break;
					case "canvasColumnB":
						this.soilItem = data
						break;
					case "canvasColumnC":
						this.waterItem = data
						break;
					case "canvasColumnD":
						this.vegetationItem = data
						break;
					case "canvasColumnE":
						this.animalItem = data
						break;
					case "canvasColumnF":
						this.microbeItem = data
						break;
					default:
						break;
				}
			},
			getHistoryData(){
				let chartData = {
				"categories":this.defaultCategories,
				"series":[{
						"name":"新成交量3",
						"data":[
							35,36,31,33,13,34,35,36,31,33,13,34,
							35,36,31,33,13,34,35,36,31,33,13,34,
						],
				}]}
				this.canvasItem = {
					categories:this.defaultCategories[0],
					value:chartData.series[0].data[0]
				}
				this.showColumn("canvasColumnA",chartData)
			},
			getSoilData(){
				let chartData = {
				"categories":this.defaultCategories,
				"series":[{
						"name":"新成交量3",
						"data":[
							35,36,31,33,13,34,35,36,31,33,13,34,
							35,36,31,33,13,34,35,36,31,33,13,34,
						],
				}]}
				this.soilItem = {
					categories:this.defaultCategories[0],
					value:chartData.series[0].data[0]
				}
				this.showColumn("canvasColumnB",chartData)
			},
			getWaterData(){
				let chartData = {
				"categories":this.defaultCategories,
				"series":[{
						"name":"新成交量3",
						"data":[
							35,36,31,33,13,34,35,36,31,33,13,34,
							35,36,31,33,13,34,35,36,31,33,13,34,
						],
				}]}
				this.waterItem = {
					categories:this.defaultCategories[0],
					value:chartData.series[0].data[0]
				}
				this.showColumn("canvasColumnC",chartData)
			},
			getVegetationData(){
				let chartData = {
					"categories":["2017年","2018年","2019年","2020年","2021年"],
					"series":[{
						"name":"",
						"data":[
							35,36,31,33,13
						]
					}],
					colors:["#32B16C"]
				}
				this.vegetationItem = {
					categories:chartData.categories[0],
					value:chartData.series[0].data[0]
				}
				this.showColumn("canvasColumnD",chartData)
			},
			getAnimalData(){
				let chartData = {
					"categories":["2017年","2018年","2019年","2020年","2021年"],
					"series":[{
						"name":"",
						"data":[
							35,36,31,33,13
						]
					}],
					colors:["#D1C0A5"]
				}
				this.animalItem = {
					categories:chartData.categories[0],
					value:chartData.series[0].data[0]
				}
				this.showColumn("canvasColumnE",chartData)
			},
			getMicrobeData(){
				let chartData = {
					"categories":["2017年","2018年","2019年","2020年","2021年"],
					"series":[{
						"name":"",
						"data":[
							35,36,31,33,13
						]
					}],
					colors:["#13B5B1"]
				}
				this.microbeItem = {
					categories:this.defaultCategories[0],
					value:chartData.series[0].data[0]
				}
				this.showColumn("canvasColumnF",chartData)
			},
		}
	}
</script>

<style lang="scss" scoped>
	$colors:#A8E160,#FDD64D,#FF9B57,#FE6A6A,#A87383,#455869;
	page {
		min-height: 100%;
		display: flex;
		background: #F4F4F4;
		overflow: hidden;
	}
	.page-content {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}
	.color1 {
		.flex-item {
			border-color: #A8E160 !important;
		}
	}
	
	@each $c in $colors{
	    $i:index($colors,$c);  
	    .color#{$i} { 
			.flex-item {
				border-color: $c !important;
			}
	     }
	}
	
	.nav-tabbar {
		// position: fixed;
		padding: 80upx 0 0;
		width: 750upx;
		height: 100upx;
		background: #F9F9F9;
		box-shadow: 0px 1px 0px 0px #E5E5E5;
		.flex-item {
			position: relative;
			font-size: 36upx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			line-height: 100upx;
			&.active{
				color: #00A0E9;
				&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 4upx;
				background: #00A0E9;
			}
			}
		}
	}
	
	.wrap {
		background-color: #fff;
		margin-bottom: 20upx;
		.wrap-title {
			padding: 50upx 0;
			font-size: 36upx;
			font-weight: 500;
			color: #333;
		}
	}
	.canvas-wrap {
		padding: 30upx 0;
	}
	.top-tips {
		width: 600upx;
		height: 50upx;
		margin: 0 auto;
		font-size: 26upx;
		color: #666;
		background: #F0F0F0;
		border-radius: 25upx;
		
		text:first-child {
			margin-right: 40upx;
		}
	}
	
	.pollution-wrap {
		padding-bottom: 50upx;
	}
	.pollution-item {
		width: 50%;
		padding-left: 70upx;
		box-sizing: border-box;
		image {
			margin-right: 20upx;
			width: 30upx;
			height: 30upx;
		}
		.flex-item {
			margin-bottom: 50upx;
			padding-left: 25upx;
			border-left: 6upx solid #ddd;
		}
		.title {
			margin-bottom: 30upx;
			font-size: 28upx;
			font-weight: bold;
			color: #5E656C;
			line-height: 1;
		}
		.unit {
			font-weight: 500;
			color: #7B93A8;
		}
		.value {
			font-size: 40upx;
			font-weight: 500;
			color: #181818;
			line-height: 1;
		}
	}
	.charts-wrap {
		padding-left: 30upx;
		padding-right: 30upx;
	}
	
	.charts-box {
		.charts {
			width: 690upx;
			height: 264upx;
		}
	}
	.show-charts-tip {
		margin-bottom: 30upx;
		padding: 30upx;
		background: #F4F4F4;
		border-radius: 6upx;
		font-size: 24upx;
		font-weight: 500;
		color: #333;
		.date {
			margin-bottom: 20upx;
			text {
				margin-right: 20upx;
			}
		}
		.content {
			text {
				margin: 0 10upx;
				color: #7B93A8;
			}
			.flex-item:last-child {
				text-align: right;
			}
		}
	}
	
	.card-item {
		width: 670upx;
		height: 180upx;
		margin: 22upx auto;
		padding: 0 30upx;
		background: linear-gradient(0deg, #F0F6F8,#fff);
		border: 1upx solid #E5E5E5;
		border-radius: 8upx;
		box-sizing: border-box;
		.flex-item {
			
		}
		.title {
			margin-bottom: 20upx;
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			image {
				width: 50upx;
				height: 50upx;
				margin-right: 10upx;
				margin-bottom: -12upx;
			}
		}
		.tips {
			font-size: 20upx;
			font-weight: 500;
			color: #999999;
		}
		.num {
			font-size: 30upx;
			align-items: baseline;
			.count {
				font-size: 60upx;
			}
		}
	}
</style>
